<template>
  <div class="order-detail-infomation-view">

    <el-form
      label-position="right"
      size="small"
      label-width="120px"
    >

      <el-row>

        <el-col :span="8">
          <el-form-item label="订单编号：">
            {{ datas.orderNumber }}
          </el-form-item>
        </el-col>

        <el-col :span="8">
          <el-form-item label="订单创建时间：">
            {{ dateFormat('yyyy-mm-dd  HH:MM',datas.createdAt) }}
          </el-form-item>
        </el-col>

        <el-col :span="8">
          <el-form-item label="创建人：">
            {{ datas.creatorName }}
          </el-form-item>
        </el-col>

        <el-col :span="8">
          <el-form-item label="订单类型：">
            {{ getLabel('order_type',datas.orderType) }}
          </el-form-item>
        </el-col>

        <el-col
          v-if="datas.orderType == 1"
          :span="8"
        >
          <el-form-item label="配送商名称：">
            <div style="display: flex">
              <span>{{ datas.distributeName }}</span>
              <el-link
                v-if="datas.distributeName"
                style="display: flex;align-items: center;margin-left: 10px"
                :underline="false"
                type="primary"
                @click="creditClick('distribute',datas.distributeId)"
              >查看信用</el-link>
            </div>

          </el-form-item>
        </el-col>

        <el-col
          v-else-if="datas.orderType == 2"
          :span="8"
        >
          <el-form-item label="终端名称：">
            {{ datas.terminalName }}

            <!--                        <el-button type="text" style="color: #00afff" v-if="datas.terminalName" @click="creditClick('terminal',datas.terminalId)">查看信用</el-button>-->
          </el-form-item>
        </el-col>

        <el-col
                v-else-if="datas.orderType == 3"
                :span="8"
        >
          <el-form-item label="代理名称：">
            <div style="display: flex">
              <span>{{ datas.agentName }}</span>
              <el-popover
                      placement="bottom"
                      :width="600"
                      trigger="click"
              >
                <div style="background-color: rgba(230,162,60,0.2);height: 25px;width: 100%;display: flex;align-items: center;margin-bottom: 10px">
                  <el-icon
                          color="#E6A23C"
                          style="margin: 0 10px"
                  >
                    <info-filled />
                  </el-icon>
                  <span>应收统计为实时数据</span>
                </div>

                <el-form>
                  <el-row>
                    <el-col :span="12">
                      <el-form-item label="应收最大额度">
                        <span class="specialColor">{{ statistical.quota }}元</span>
                      </el-form-item>
                    </el-col>

                    <el-col :span="12">
                      <el-form-item label="当前累计应收">
                        <span class="specialColor">{{ statistical.sumSellAmount - statistical.sumReturnAmount }}元</span>
                      </el-form-item>
                    </el-col>

                    <el-col :span="12">
                      <el-form-item label="累计销售额">
                        <span class="specialColor">{{ statistical.sumSellAmount }}元</span>
                      </el-form-item>
                    </el-col>

                    <el-col :span="12">
                      <el-form-item label="累计回款金额">
                        <span class="specialColor">{{ statistical.sumReturnAmount }}元</span>
                      </el-form-item>
                    </el-col>
                  </el-row>
                </el-form>

                <template #reference>
                  <el-link
                          v-if="datas.agentName"
                          style="display: flex;align-items: center;margin-left: 10px"
                          :underline="false"
                          type="primary"
                          @click="agentCredit(datas.agentId)"
                  >查看信用</el-link>
                </template>
              </el-popover>
            </div>
          </el-form-item>
        </el-col>

        <el-col
                v-else-if="datas.orderType == 4"
                :span="8"
        >
          <el-form-item label="商销客户名称：">
            <div style="display: flex">
              <span>{{ datas.sellerName }}</span>
              <el-popover
                      placement="bottom"
                      :width="600"
                      trigger="click"
              >
                <div style="background-color: rgba(230,162,60,0.2);height: 25px;width: 100%;display: flex;align-items: center;margin-bottom: 10px">
                  <el-icon
                          color="#E6A23C"
                          style="margin: 0 10px"
                  >
                    <info-filled />
                  </el-icon>
                  <span>应收统计为实时数据</span>
                </div>

                <el-form>
                  <el-row>
                    <el-col :span="12">
                      <el-form-item label="应收最大额度">
                        <span class="specialColor">{{ statistical.quota }}元</span>
                      </el-form-item>
                    </el-col>

                    <el-col :span="12">
                      <el-form-item label="当前累计应收">
                        <span class="specialColor">{{ statistical.sumSellAmount - statistical.sumReturnAmount }}元</span>
                      </el-form-item>
                    </el-col>

                    <el-col :span="12">
                      <el-form-item label="累计销售额">
                        <span class="specialColor">{{ statistical.sumSellAmount }}元</span>
                      </el-form-item>
                    </el-col>

                    <el-col :span="12">
                      <el-form-item label="累计回款金额">
                        <span class="specialColor">{{ statistical.sumReturnAmount }}元</span>
                      </el-form-item>
                    </el-col>
                  </el-row>
                </el-form>

                <template #reference>
                  <el-link
                          v-if="datas.sellerName"
                          style="display: flex;align-items: center;margin-left: 10px"
                          :underline="false"
                          type="primary"
                          @click="agentCredit(datas.sellerId,'seller')"
                  >查看信用</el-link>
                </template>
              </el-popover>
            </div>
          </el-form-item>
        </el-col>

        <el-col :span="8">
          <el-form-item label="客户下单日期：">
            <span v-if="datas.putOrderTime">{{ dateFormat('yyyy-mm-dd',datas.putOrderTime) }}</span>
          </el-form-item>
        </el-col>

        <el-col :span="8">
          <el-form-item label="收货地址：">
            {{ datas.acceptAddress }}
          </el-form-item>
        </el-col>

        <el-col :span="8">
          <el-form-item label="收货人：">
            {{ datas.acceptUser }}
          </el-form-item>
        </el-col>

        <el-col :span="8">
          <el-form-item label="收货人电话：">
            {{ datas.acceptTel }}
          </el-form-item>
        </el-col>

        <el-col :span="8" v-if="datas.orderType == 1">
          <el-form-item label="订单是否分户：">
            <span v-if="datas.isSplit == 2">是</span>
            <span v-else>否</span>
          </el-form-item>
        </el-col>

<!--        <el-col-->
<!--          v-if="datas.isSplit == 2"-->
<!--          :span="8"-->
<!--        >-->
<!--          <el-form-item label="客户类型：">-->
<!--            <span>{{ getLabel('agent_type',datas.agentType) }}</span>-->
<!--          </el-form-item>-->
<!--        </el-col>-->

        <el-col
          v-if="datas.isSplit == 2 && datas.agentId"
          :span="8"
        >
          <el-form-item label="代理名称：">
            <div style="display: flex">
              <span>{{ datas.agentName }}</span>
              <el-popover
                placement="bottom"
                :width="600"
                trigger="click"
              >
                <div style="background-color: rgba(230,162,60,0.2);height: 25px;width: 100%;display: flex;align-items: center;margin-bottom: 10px">
                  <el-icon
                    color="#E6A23C"
                    style="margin: 0 10px"
                  >
                    <info-filled />
                  </el-icon>
                  <span>应收统计为实时数据</span>
                </div>

                <el-form>
                  <el-row>
                    <el-col :span="12">
                      <el-form-item label="应收最大额度">
                        <span class="specialColor">{{ statistical.quota }}元</span>
                      </el-form-item>
                    </el-col>

                    <el-col :span="12">
                      <el-form-item label="当前累计应收">
                        <span class="specialColor">{{ statistical.sumSellAmount -  statistical.sumReturnAmount}}元</span>
                      </el-form-item>
                    </el-col>

                    <el-col :span="12">
                      <el-form-item label="累计销售额">
                        <span class="specialColor">{{ statistical.sumSellAmount }}元</span>
                      </el-form-item>
                    </el-col>

                    <el-col :span="12">
                      <el-form-item label="累计回款金额">
                        <span class="specialColor">{{ statistical.sumReturnAmount }}元</span>
                      </el-form-item>
                    </el-col>
                  </el-row>
                </el-form>

                <template #reference>
                  <el-link
                    v-if="datas.agentName"
                    style="display: flex;align-items: center;margin-left: 10px"
                    :underline="false"
                    type="primary"
                    @click="agentCredit(datas.agentId)"
                  >查看信用</el-link>
                </template>
              </el-popover>
            </div>

            <!--                        <a v-if="datas.agentName" class="mainColor" @click="creditClick('agent',datas.agentId)">查看信用</a>-->
          </el-form-item>
        </el-col>

        <el-col :span="8">
          <el-form-item label="收款类型：">
            {{ getLabel('receive_money_type',datas.receiveMoneyType) }}
          </el-form-item>
        </el-col>

        <el-col :span="8">
          <el-form-item label="期望交货日期：">
            <span v-if="datas.expireDeliveryTime">{{ dateFormat('yyyy-mm-dd',datas.expireDeliveryTime) }}</span>
          </el-form-item>
        </el-col>

        <el-col :span="8">
          <el-form-item label="负责营销职员：">
            {{ datas.headName }}
          </el-form-item>
        </el-col>

        <!--                <el-col :span="6">-->
        <!--                    <el-form-item label="发货日期：">-->
        <!--                        <span v-if="datas.deliveryTime">{{dateFormat('yyyy-mm-dd',datas.deliveryTime)}}</span>-->
        <!--                    </el-form-item>-->
        <!--                </el-col>-->

        <el-col
          v-if="datas.acceptTime"
          :span="8"
        >
          <el-form-item label="确认收货日期：">
            {{ dateFormat('yyyy-mm-dd',datas.acceptTime) }}
          </el-form-item>
        </el-col>

        <el-col :span="8">
          <el-form-item :label="datas.orderType == 4 ? '关联客户合同：' : datas.orderType == 3 ? '关联代理合同：' : datas.orderType == 2 ? '关联终端合同：' : datas.isSplit == 2 ? '关联代理合同：' : '关联配送合同：'">
            {{ datas.contractName }}
          </el-form-item>
        </el-col>

        <el-col :span="8">
          <el-form-item label="备注：">
            {{ datas.remark }}
          </el-form-item>
        </el-col>

      </el-row>
    </el-form>

  </div>

  <detail-drawer
    ref="refDrawer"
    custom-title
    :size-width="1000"
  >
    <template #title>
      <div style="display: flex;justify-content: space-between">

        <div class="credit-title">
          <span class="drawer-title">信用-{{ name }}</span>
          <!--                    <span class="title-name">{{name}}</span>-->
        </div>

      </div>

    </template>
    <template #contents>

      <credit-view
        :datas="creditData"
        :statistical="statistical"
      />

    </template>
  </detail-drawer>

</template>

<script>
import {InfoFilled} from '@element-plus/icons'
import {useRoute, useRouter} from 'vue-router'
import {defineComponent, defineAsyncComponent, inject, reactive, toRefs,} from 'vue'

export default defineComponent({
  name: 'InfomationView',
  components: {
    creditView:defineAsyncComponent(()=>import('./creditView.vue')),
    InfoFilled
  },
  props: {
    datas: {
      type: Object,
      default: {},
    },
  },
  setup(props) {
    const route = useRoute()
    const router = useRouter()
    const api = inject('api')

    var data = reactive({
      refDrawer: null,
      creditData: {},
      name: '',
      statistical: {},
    })

    const agentCredit = (id,type) => {
      const a = {
        customerId: id,
        customerType: type ? type : props.datas.agentType,
      }
      api.order.ORDER_DETAIL_FINANCE(a).then((res) => {
        if (!res.code && res.data) {
          data.statistical = res.data
        }
      })
    }

    const creditClick = (mode, id) => {
      if (mode == 'distribute') {
        data.name = props.datas.distributeName
      } else if (mode == 'terminal') {
        data.name = props.datas.terminalName
      } else if (mode == 'agent') {
        data.name = props.datas.agentName
      }

      api.common
        .CREDIT_PRODUCT_LIST_FOR_ORDER({
          relationId: id,
          creditType: mode,
        })
        .then((res) => {
          if (res.code === 0) {
            data.creditData = res.data
            // reactiveData.listData = res.data.list
            // reactiveData.total = res.data.total
            // reactiveData.quota = res.data.quota
            data.refDrawer.open()
          }
        })
      const a = {
        customerId: id,
        customerType: '',
      }

      if (mode == 'distribute') {
        a.customerType = 'distribute'
      } else if (mode == 'terminal') {
        a.customerType = 'terminal'
      } else if (mode == 'agent') {
        a.customerType = props.datas.agentType
      }

      api.order.ORDER_DETAIL_FINANCE(a).then((res) => {
        if (!res.code && res.data) {
          data.statistical = res.data
        }
      })
    }

    return {
      ...toRefs(data),

      creditClick,
      agentCredit,
    }
  },
})
</script>

<style lang="scss" scoped>
@import "@/style/basics.scss";
.order-detail-infomation-view {
  .mainColor {
    color: $active-color;
  }
}
.credit-title {
  .drawer-title {
    margin-right: $block-x;
    font-size: $font-size;
  }
  .title-name {
    font-size: $font-size-title;
  }
}
</style>
